<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link href="css/css8.css" rel="stylesheet" type="text/css">
    <title></title>
	<style type="text/css">
		a:hover{
			text-decoration: none;
		}
	</style>
</head>
<body>

<div class="container-fluid">


<!--导航栏-->
   <nav class="navbar navbar-dark bg-danger navbar-expand-lg">
  <a class="navbar-brand" href="#">特色菜</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" >
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a href="login.jsp" class="nav-link active">首页</a></li>
        <li class="nav-item"><a href="#" class="nav-link">地区</a></li>
        <li class="nav-item"><a href="#" class="nav-link">联系我们</a></li>

    </ul>
    
    <!-- 表格 -->
    <form class="form-inline my-2 my-lg-0" action="SpecialtyServlet">
          <input class="form-control mr-sm-2" name="add_name" placeholder="搜索菜名" aria-label="Search" type="text">
          <div>
					<input type="submit" value="搜索"style="width: 50px; height: 40px"></div>
    </form>
    
    
  </div>
</nav>




<!--中等屏幕-->
 <div class="d-md-flex" >
    <nav class="nav d-md-block d-none" style="min-width:10rem;">
            <a class="nav-link active" href="#">家常推荐</a>
            <a class="nav-link" href="#" >人气推荐</a>
    </nav>

<!--小屏 -->
  <nav class="nav nav-pills d-block d-md-none" style="min-width:10rem;">
      <a class="nav-link active mt-3" href="#">家常推荐</a>
      <a class="nav-link" href="#north">人气推荐</a>
  </nav>


<!--线路-->
     <div class="flex-md-grow-1">
       
    <div class=" mb-3">
        <h5 class="border-bottom border-danger text-danger py-3 pl-3">欢迎订购</h5>
    </div>
     <div class="row">
             <a>       <c:forEach  items="${specialty}" var="s">
                        <div class="card  col-lg-3 col-md-4" style="width: 18rem;">
                          <img src="${s.src}" class="card-img-top" alt="..." height="256px" width="200px">
                          <div class="card-body">
                            <h5 class="card-title text-primary">${s.name}</h5>
                            <p class="card-text text-dark">${s.introduce}</p>
                            <a ></a>
                          </div>
                        </div>
                        </c:forEach>
                </a>           
  
     </div>
    









</div>

</body>
</html>